<script lang="ts" setup>
	import { onPageScroll, onReady } from '@dcloudio/uni-app'
	import { useScrollUpdownBottomContent } from '@/hooks'
	import { useSubPage } from './composables'
	import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
	import { useUserStore } from '@/stores'
	const {
		navBarInfo,
		userInfo,
		loginHandle,
		navUserInfoPage,
		navCommonProblemPage,
		navMemberRightsPage,
		navOrderListPage,
		navbarInitFinishHandle,
		getData,
		list,
	} = useSubPage()
	const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
		useScrollUpdownBottomContent('up', 80)
	const userStore = useUserStore()
	onReady(() => { })
	onPageScroll((e) => { })
	const toActivePage = async (item) => {
		console.log(userStore.getIfBindSn)
		if (userStore.getIfBindSn) {
			tnNavPage(`/home-page/typeStudy/en-answer?id=${item.id}&name=${item.name}`)
			// await userStore.checkUserSn()
		} else {
			uni.showModal({
				title: '设备未激活',
				content: '学习英语需要长期坚持哦，超多权益等你来解锁',
				confirmText: '立即激活',
				cancelText: '放弃福利',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定')
						userStore.toScanMate()
					} else if (res.cancel) {
						console.log('用户点击取消')
						tnNavPage('/pages/index/index', 'switchTab')
					}
				},
			})
		}
	}
	// //调起微信小程序扫码
	// const toScanMate = () => {
	//   uni.scanCode({
	//     onlyFromCamera: true, // 默认false，true为只允许从相机扫码
	//     success: async (res) => {
	//       console.info(res) //打印出来，查看自己想要的返回结果数据
	//       // 拿SN码去绑定设备
	//       await userStore.toBindUserSn(res.result)
	//     },
	//   })
	// }
</script>

<template>
	<TnNavbar fixed bg-color="#f1f5fb" :bottom-shadow="false" :placeholder="false" title="续费"
		@init-finish="navbarInitFinishHandle">
		<view class="tn-color-black" style="font-size: 30rpx">场景练习</view>
	</TnNavbar>
	<!-- 顶部背景 -->
	<view class="top-bg" />
	<!-- 页面内容 -->
	<view class="page" :style="{ paddingTop: `${navBarInfo.height - 34}px` }">
		<view class="card-swiper" :circular="true" @click="tn('/pageA/navigation/navigation')" :autoplay="false"
			duration="500" interval="18000" @change="cardSwiper">
			<view v-for="(item, index) in 1" :key="index"
				style="position: relative">
				<view class="swiper-item image-banner">
					<image
						src="https://cdn.nlark.com/yuque/0/2023/png/280373/1702622459812-assets/web-upload/f6850ebf-e261-4e67-9574-53c5c83def10.png"
						mode="aspectFit"></image>
				</view>
				<view class="swiper-item2 image-banner"
					:style="'background-image:url(https://cdn.nlark.com/yuque/0/2024/png/280373/1706708394879-assets/web-upload/dd983175-8ab7-4a19-b698-cfebf4be0b85.png);background-size: cover;'">
				</view>
				<!-- <view
          class="swiper-item3 image-banner"
          :style="'background-image:url(https://cdn.nlark.com/yuque/0/2024/png/280373/1706708143138-assets/web-upload/be40e441-03f1-42db-b0b3-cac416c859b4.png);background-size: cover;'"
        >
        </view> -->
				<view class="swiper-item-text">
					<view class="banner-box">
						<image src="@/static/imgs/icons/cg_banner.png" mode="widthFix"></image>
						<view class="tips-one">
							<view class="t1">HI~ </view>
							<view class="t2">我是你的专属外教老师lily，和我一起练习英语场景吧</view>
						</view>
						<view class="tips-two">
							<view class="t1">情景自由聊</view>
							<view class="t2">每天口语10分钟，进阶口语达人</view>
						</view>
						<!-- <view class="text-sussuspension">
              <view
                class="tn-text-bold"
                style="font-size: 46rpx; color: #0e2d6d"
                >Hi,我是你的专属外教</view
              >
              <view
                class="tn-padding-top-xs"
                style="font-size: 26rpx; color: #0e2d6d; width: 80%"
              >
                Hi,我是你的专属外教老师LiLi,和我一起练习口语吧</view
              >
            </view>
            <view class="text-sussuspension mt-8">
              <view
                class="tn-text-bold"
                style="font-size: 46rpx; color: #0e2d6d"
                >情景自由聊</view
              >
              <view
                class="tn-padding-top-xs"
                style="font-size: 26rpx; color: #0e2d6d"
                >每天口语10分钟，进阶口语达人
              </view>
            </view> -->
					</view>
				</view>
				<!-- <view
          class="swiper-item-text-tips"
          style="position: absolute; right: 0; top: 64rpx"
        >
          <image
            src="https://cdn.nlark.com/yuque/0/2024/png/280373/1706708143138-assets/web-upload/be40e441-03f1-42db-b0b3-cac416c859b4.png"
          ></image>
        </view> -->
			</view>
		</view>
		<view class="listi-title"> 专题提升 ({{ list.length }}) </view>
		<view class="item-bar" v-for="(item, index) in list" :key="index" @click="toActivePage(item)">
			<image :src="item.picture" class="left-head" mode="scaleToFill"></image>
			<view class="right-info">
				<view class="top_box">
					<view class="title">
						{{ item.name }}
					</view>
				</view>
				<text class="detail-text">{{ item.en_name }}</text>
			</view>
			<image v-if="item.isMem == 1" src="../../static/imgs/finish_icon.png" mode="widthFix"
				class="finish-icon-new"></image>
		</view>
		<!-- <view
      class="tn-flex plr-12 ptb-16 tn-flex-wrap tn-padding-xs bg-color-white br-16"
    >
      <view
        class="special"
        v-for="(item, index) in list"
        :key="index"
        @click="toActivePage(item)"
      >
        <view
          class="tn-flex tn-flex-direction-column pl-12"
          style="
            height: 100%;
            color: #4473c8;
            border-radius: 28rpx;
            box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(52, 103, 194, 0.08);
          "
          :style="{ 'background-color': 'rgba' + item.bgColor }"
        >
          <view class="tn-text-lg tn-text-bold mt-12">
            <text
              class="tn-text-ellipsis font-size-16"
              :style="{ color: item.color }"
              >{{ item.name }}</text
            >
          </view>
          <view class="tn-text-xs tn-padding-top-xs mt-4">
            <text class="tn-text-ellipsis font-color-c999 font-size-12">{{
              item.enname
            }}</text>
          </view>
        </view>
        <image
          v-if="item.isMem == 1"
          src="../../static/imgs/finish_icon.png"
          mode="widthFix"
          class="finish-icon"
        ></image>
      </view>
    </view> -->
	</view>
</template>

<style lang="scss" scoped>
	@import './styles/index.scss';

	.banner-box {
		position: relative;

		.tips-one {
			position: absolute;
			left: 36rpx;
			top: 130rpx;
			width: 50%;

			.t1 {
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 48rpx;
				font-style: normal;
				text-transform: none;
			}

			.t2 {
				margin-top: 10rpx;
				width: 378rpx;
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.tips-two {
			position: absolute;
			left: 60rpx;
			bottom: 78rpx;
			width: 50%;

			.t1 {
				height: 44rpx;
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #4b49e8;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				padding-left: 44rpx;
			}

			.t2 {
				width: 318rpx;
				height: 40rpx;
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6968c9;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.item-bar {
		display: flex;
		padding: 16rpx;
		font-family: 'tuniao-xiaowei';
		height: 152rpx;
		margin-bottom: 28rpx;
		background: #ffffff;
		border-radius: 22rpx;

		.left-head {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 30rpx;
			align-self: center;
		}

		.right-info {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: calc(100% - 170rpx);

			.top_box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-weight: bold;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}

			.detail-text {
				font-size: 22rpx;
				margin: 6rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.bottom {
				font-size: 20rpx;
				color: #bebebe;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.listi-title {
		height: 48rpx;
		font-family:
			PingFang SC,
			PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #070044;
		line-height: 48rpx;
		font-style: normal;
		text-transform: none;
		padding-left: 30rpx;
		margin-top: 48rpx;
		margin-bottom: 16rpx;
	}

	.finish-icon-new {
		width: 40rpx;
		margin-top: 42rpx;
	}
</style>